<template>
	<div class="card-item-warpper">
		<div class="card-item-panel" :class="[autoColor ? 'auto-color-panel' : '']" :style="{ ...getCardPanelStyle() }">
			<div class="card-item-head" v-if="headName">
				<div class="item-head-icon">
					<rk-icon v-if="headIcon" :icon-style="{ width: iconWidth, height: iconHeight }" :icon-class="headIcon" />
				</div>
				<span class="item-head-title">{{ headName }}</span>
			</div>
			<div class="card-item-main">
				<div class="card-info-panel" v-for="item in infoList" :key="item" :style="{ ...getInfoPanelStyle() }">
					<div class="info-panel-head">
						<span class="term-icon" v-if="item.icon">
							<rk-icon :icon-class="item.icon" />
						</span>
						<span class="term-title">{{ item.label }}</span>
					</div>
					<div class="info-panel-body">
						<span class="term-num" @click="emitCountClick(item)">{{ item.value }}</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
const props = defineProps({
	// 面板背景颜色
	bgColor: { type: [String, Array] },
	// 面板头部名称
	headName: { type: String },
	// 面板头部图标
	headIcon: { type: String },
	// 图标的宽度
	iconWidth: { type: String, default: '1.5em' },
	// 图标的高度
	iconHeight: { type: String, default: '1.5em' },
	// 选项内容
	infoList: {
		type: Array,
		default: () => {
			return [];
		},
	},
	// 是否自动渲染块的颜色
	autoColor: { type: Boolean, default: true },
});

const emits = defineEmits(['countClick']);
const emitCountClick = (info) => {
	emits('countClick', info);
};

/**
 * 个性化面板样式
 */
const getCardPanelStyle = () => {
	const { bgColor } = props;
	let style = {};
	if (bgColor) {
		if (bgColor instanceof Array) {
			let background = `linear-gradient(90deg,${bgColor[0]},${bgColor[1]})`;
			// let boxShadow = `0 5px 10px ${bgColor[1]}`
			// style['boxShadow'] = boxShadow
			style['background'] = background;
		} else {
			style['background'] = bgColor;
		}
	}
	return style;
};

/**
 * 个性化信息样式
 */
const getInfoPanelStyle = () => {
	const { infoList } = props;
	let style = {};
	if (infoList && infoList.length) {
		style['width'] = `calc(100% / ${infoList.length})`;
	}
	return style;
};
</script>

<style lang="scss" scoped>
.card-item-warpper {
	flex: 1;
	padding: 0 5px;
	// width: calc(100% / 3);
	&:nth-child(1) {
		.auto-color-panel {
			color: #fff;
			// background: linear-gradient(90deg,#5171fd,#7397fa);
			background: linear-gradient(90deg, #ef9b5f, #ebb980);
			// box-shadow: 0 5px 10px #ebb980;
		}
	}
	&:nth-child(2) {
		.auto-color-panel {
			color: #fff;
			background: linear-gradient(90deg, #25b97d, #67e09a);
			// box-shadow: 0 5px 10px #67e09a;
		}
	}
	&:nth-child(3) {
		.auto-color-panel {
			color: #fff;
			background: linear-gradient(90deg, #737bfc, #3dadf6);
			// box-shadow: 0 5px 10px #3dadf6;
		}
	}
	&:nth-child(4) {
		.auto-color-panel {
			color: #fff;
			background: linear-gradient(90deg, #ea677c, #ef9b5f);
			// box-shadow: 0 5px 10px #ef9b5f;
		}
	}
}
.card-item-panel {
	color: #656565;
	height: 100%;
	padding: 10px;
	border-radius: 5px;
	background-color: #fff;
	// box-shadow: 0 1px 8px 0 rgba(0,0,0,.1);
	.card-item-head {
		display: flex;
		height: 35px;
		font-weight: 600;
		text-align: center;
		align-items: center;
		justify-content: center;
		// margin-bottom: 20px;
		.item-head-icon {
			display: flex;
			margin-right: 8px;
		}
		.item-head-title {
			font-size: 18px;
			// color: #656565;
		}
	}
	.card-item-main {
		display: flex;
		margin-left: -5px;
		margin-right: -5px;
		margin-top: 12px;
	}
}
.card-item-panel {
	&:hover {
		-webkit-box-shadow: 3px 5px 15px rgba(40, 40, 40, 0.36);
		box-shadow: 3px 5px 15px rgba(40, 40, 40, 0.36);
		// -webkit-transform: scale(1.03);
		// transform: scale(1.03);
		// -webkit-transition: all .1s ease-out;
		// transition: all .1s ease-out;
	}
}
.card-info-panel {
	width: calc(100% / 3);
	padding: 0 5px;
	.info-panel-head {
		font-size: 16px;
		font-weight: 600;
		text-align: center;
		margin-bottom: 10px;
		.term-icon {
			margin-right: 5px;
		}
	}
	.info-panel-body {
		height: 50px;
		max-width: 80px;
		text-align: center;
		font-size: 28px;
		line-height: 50px;
		margin: 0 auto;
		border-radius: 6px;
		transition: box-shadow 0.2s;
		padding: 0 5px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		.term-num {
			cursor: pointer;
			&:hover {
				// color: #3dadf6;
				text-decoration: underline;
			}
		}
	}
}
</style>
